<%@attribute name="page" required="true" type="java.lang.String"%>
<%@attribute name="id" required="true" type="java.lang.Integer"%>
<%@attribute name="sort" required="true" type="java.lang.String"%>
<%@attribute name="value" required="true" type="java.lang.String"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<div class="browseCategory">
    <c:choose>
        <c:when test="${sort == 'price'}">
            <c:set var="title" value="Price" />
            <c:choose>
                <c:when test="${value == 'desc'}">
                    <c:set var="price_desc" value="selected=\"selected\"" />
                </c:when>
                <c:otherwise>
                    <c:set var="price_asc" value="selected=\"selected\"" />
                </c:otherwise>
            </c:choose>
        </c:when>
        <c:when test="${sort == 'title'}">
            <c:set var="title" value="Title" />
            <c:choose>
                <c:when test="${value == 'desc'}">
                    <c:set var="title_desc" value="selected=\"selected\"" />
                </c:when>
                <c:otherwise>
                    <c:set var="title_asc" value="selected=\"selected\"" />
                </c:otherwise>
            </c:choose>
        </c:when>
        <c:otherwise>
            <c:set var="title" value="Release Date" />
            <c:choose>
                <c:when test="${value == 'asc'}">
                    <c:set var="date_asc" value="selected=\"selected\"" />
                </c:when>
                <c:otherwise>
                    <c:set var="date_desc" value="selected=\"selected\"" />
                </c:otherwise>
            </c:choose>
        </c:otherwise>
    </c:choose>
    <label for="orderby">Order by ${title}</label>
    <c:set var="url" value="?page=${page}&amp;id=${id}" />
    <select id="orderby">
        <optgroup label="Release Date">
            <option value="${url}&amp;sort=releaseDate&amp;value=asc" ${date_asc}>Ascending</option>
            <option value="${url}&amp;sort=releaseDate&amp;value=desc" ${date_desc}>Descending</option>
        </optgroup>
        <optgroup label="Price">
            <option value="${url}&amp;sort=price&amp;value=asc" ${price_asc}>Ascending</option>
            <option value="${url}&amp;sort=price&amp;value=desc" ${price_desc}>Descending</option>
        </optgroup>
        <optgroup label="Title">
            <option value="${url}&amp;sort=title&amp;value=asc" ${title_asc}>Ascending</option>
            <option value="${url}&amp;sort=title&amp;value=desc" ${title_desc}>Descending</option>
        </optgroup>
    </select>
</div>
<script type="text/javascript">
    $(function() {
        $('#orderby').selectmenu({
            width: 150
        });
        
        $('#orderby').change(function(){
            $(location).attr('href', $(this).val());
        });
    });
</script>